<template>
  <div id="page" :class="$store.state.themeFont.value!=undefined?'font-'+$store.state.themeFont.value:''" :style="'background:'+$store.state.themeColor.color_bg1" class="page">
    <router-view class="pageView"></router-view>
  </div>
</template>
<script>
import Home from './views/Home.vue'
import MusicCtrl from '@/assets/js/musicCtrl.js'
export default {
  name: 'app',
  data() {
    return {
    }
  },
  components: {
    Home
  },
  created() {
    let dataId = 3
    if(!localStorage.dataId || localStorage.dataId<dataId){
      let topList = localStorage['topList']
      let user = localStorage['user']
      let egg = localStorage['egg']
      localStorage.clear()
      if(topList){
        localStorage['topList'] = topList
      }
      if(egg){
        localStorage['egg'] = egg
      }
      if(user){
        localStorage['user'] = user
      }
      localStorage.dataId = dataId
    }
    //数据初始化
    this.version = this.initStorage('version', { value: 0 })
    this.user = this.initStorage('user', {
      userName: '未命名'
    })
    this.themeColor = this.initStorage('themeColor', {
      name: '银灰色',
      id: 2,
      show: '#AAA',
      color_bg: '0xe0e0e0',
      color_bg1: '#E0E0E0',
      color_md: '0xa0a0a0',
      color_1: '#AAA',
      color_2: '#CCC'
    })
    this.themeFont = this.initStorage('themeFont', {
      id: 1,
      name: '夏日风格字体',
      value: 'xiari'
    })
    this.musicBgm = this.initStorage('musicBgm', {
      id: 1,
      name: 'bensound',
      url: '/music/bgm/bensound.mp3',
      volume: "0.4"
    })
    this.musicGame = this.initStorage('musicGame', {
      id: 1,
      name: '作者配音',
      introduce: '/music/author/introduce.mp3',
      dig: '/music/author/dig.mp3',
      flag: '/music/author/flag.mp3',
      over: '/music/author/over.mp3',
      win: '/music/author/win.mp3',
      hidden: '/music/author/hidden.mp3'
    })
    this.difficulty = this.initStorage('difficulty', {
      diff: 1,
      mode: 1
    })
    this.settings = this.initStorage('settings', {
      controller: 1,
      staticMoving: false,
      autoFlag: true,
      dialog: true,
      flagPress: true,
      fps: 15,
      refreshBtn: false,
      clickNum: true,
      flagSchools: true,
      saveScore: true,
      bgChange:true,
      sensitive: {
        xz: 1,
        sf: 1.2,
        py: 0.3
      }
    })
    
    //初始化音乐控制器
    let musicCtrl = this.$store.getters.getByState('musicCtrl')
    if (!musicCtrl) {
      musicCtrl = new MusicCtrl(this.musicBgm, this.musicGame)
      this.$store.commit('createState', { key: 'musicCtrl', data: musicCtrl })
    }
    // console.log(this.$store.state)
  },

  methods: {
    initStorage(storage, res) {
      let data = localStorage[storage]
      if (!data) {
        localStorage[storage] = JSON.stringify(res)
        data = res
      } else {
        data = JSON.parse(data)
      }
      if (!this.$store.getters.getByState(storage)) {
        this.$store.commit('createState', { key: storage, data: data })
      }
      return data
    }
  },
  activated() {
    console.log('activated')
  }
}
</script>

<style lang="scss">
//全局css
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.page {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageView {
  flex: 1;
}
@font-face {
  font-family: "xiari";
  src: url("./assets/fonts/xiari.ttf");
}

.font-xiari {
  font-family: "xiari";
  font-weight: bolder;
}

.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
